<template>
    <div class="container">
        <div class="breadcrumb">
            位置：首页<span>></span>问题库<span>></span
            >{{ info.issue_cate_name }}
        </div>
        <div class="main">
            <div class="quiz-title">
                {{ info.title }}
            </div>
            <div class="quiz-time">
                {{ jsonld.pubDate }}
            </div>
            <div v-if="info" class="info">
                <img
                    src="~/assets/images/quizdata/info_icon.png"
                    :alt="info.title"
                    class="info-icon"
                />
                <div class="info-label">解答详情</div>
                <div class="info-content" v-html="info.answer_content"></div>
                <div v-show="operateShow" class="info-operate">
                    <div class="operate-item" @click="setLike">
                        <van-icon
                            :name="info.is_collect == 0 ? 'star-o' : 'star'"
                            :color="
                                info.is_collect == 0 ? '#999999' : '#ffc35a'
                            "
                            size="0.8rem"
                            class="icon"
                        />
                        收藏
                    </div>
                    <div class="operate-item" @click="setLike1">
                        <van-icon
                            :name="
                                info.is_like == 0 ? 'good-job-o' : 'good-job'
                            "
                            :color="info.is_like == 0 ? '#999999' : '#ffc35a'"
                            size="0.8rem"
                            class="icon"
                        />
                        点赞
                    </div>
                </div>
            </div>
            <div v-if="info" class="info">
                <img
                    src="~/assets/images/quizdata/info_icon2.png"
                    :alt="info.title"
                    class="info-icon"
                />
                <div class="info-label">解答依据</div>
                <div
                    class="info-content"
                    v-html="info.pursuant_content"
                    style="white-space: pre-wrap"
                ></div>
                <div v-if="info.all_based_source.length > 0" class="link-list">
                    <nuxt-link
                        v-for="(item, index) in info.all_based_source"
                        :key="index"
                        class="link"
                        :to="
                            item.type == '1'
                                ? `/ssfgk/${item.id}.html`
                                : `/kjfgk/${item.id}.html`
                        "
                    >
                        <van-icon name="link-o" color="#3473B3" size="1rem" />
                        <div>{{ item.title }}</div>
                    </nuxt-link>
                </div>
                <!-- <div class="info">
                    <div class="go-wechat"></div>
                </div> -->
            </div>
        </div>
    </div>
</template>

<script>
import {
    getInfo,
    setLike,
    recommend_issue,
    getKeywordList,
} from "@/assets/api/quizData";
import { wtk_cancelLike } from "@/assets/api/userCenterApi.js";
import { getText, goTopSmooth } from "@/assets/utils/utils.js";
import moment from "moment";
export default {
    name: "IndexPage",
    async asyncData({ params, query }) {
        let data = {
            id: 0,
            info: null,
            mateInfo: {
                title: "问题库",
                keywords: "",
                description: "",
            },
            all_based_source: [],
            jsonld: {
                "@context": "https://ziyuan.baidu.com/contexts/cambrian.jsonld",
                "@id": "https://www.xzcs2022.com/quizdata",
                images: [""],
                title: "",
                description: "",
                pubDate: "2024-03-14",
                upDate: "2024-03-14",
            },
        };
        data.jsonld["@id"] += "/" + params.id;
        data.id = params.id.replace(".html", "");

        const res = await getInfo({ id: data.id });
        if (res.code == 1) {
            data.info = res.data;
            data.jsonld.pubDate = moment(data.info.createtime * 1000).format(
                "YYYY-MM-DD"
            );
            data.jsonld.upDate = data.jsonld.pubDate;
            if (data.info.nextdata)
                data.info.nextdata.createtime = moment(
                    data.info.nextdata.createtime * 1000
                ).format("YYYY-MM-DD");
            if (data.info.prevdata)
                data.info.prevdata.createtime = moment(
                    data.info.prevdata.createtime * 1000
                ).format("YYYY-MM-DD");

            data.mateInfo.title = data.info.title;
            data.mateInfo.description = getText(data.info.abstract);
            data.mateInfo.keywords = data.info.keyword;
            data.jsonld.title = data.info.title;
            data.jsonld.description = getText(data.info.abstract);

            if (data.info.is_show_basis == 1) {
                data.all_based_source = data.info.all_based_source;
            }
        }

        return data;
    },
    layout: "home",
    head() {
        return {
            script: [
                {
                    type: "application/ld+json",
                    innerHTML: JSON.stringify(this.jsonld), // <- set jsonld object in data or wherever you want
                },
            ],
            __dangerouslyDisableSanitizers: ["script"],
            title: this.mateInfo.title + "-【小竹财税平台】",
            meta: [
                {
                    hid: "description",
                    name: "description",
                    content: this.mateInfo.description,
                },
                {
                    hid: "keywords",
                    name: "keywords",
                    content: this.mateInfo.keywords,
                },
            ],
        };
    },
    computed: {},
    data() {
        return {
            operateShow: false,
        };
    },
    mounted() {
        console.log(this.info);
        if (window.localStorage.getItem("token")) this.getInfo();
        this.$nextTick(() => {
            goTopSmooth();
        });
    },
    methods: {
        //获取详情
        async getInfo() {
            let res = await getInfo({ id: this.id });
            if (res.code == 1) {
                this.info = res.data;
                this.operateShow = true;
            }
        },

        //收藏与取消收藏
        async setLike() {
            let res = await wtk_cancelLike({ id: this.id });
            if (res.code == 1) {
                this.getInfo();
            }
        },

        //点赞与取消点赞
        async setLike1() {
            let res = await setLike({ id: this.id });
            if (res.code == 1) {
                this.getInfo();
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.breadcrumb {
    height: 2.28rem;
    line-height: 2.28rem;
    padding-left: 1.43rem;
    font-size: 0.75rem;
    color: #666666;
    background: #e8f4ff;
    border-bottom: 1px solid #f6f6f6;
}
.main {
    background-color: #dbedff;
    padding-top: 1rem;
    min-height: 100vh;
}
.quiz-title,
.quiz-time {
    width: 20.25rem;
    margin: 0 auto;
}

.quiz-title {
    font-weight: 500;
    font-size: 1.12rem;
    color: #333333;
    line-height: 1.5;
}

.quiz-time {
    font-weight: 400;
    font-size: 0.68rem;
    color: #7398bf;
    margin-top: 0.4rem;
}

.info {
    width: 90%;
    margin: 2rem auto 0;
    background: #ffffff;
    box-shadow: 0px 8px 26px 0px rgba(0, 0, 0, 0.05);
    border-radius: 0.9rem;
    position: relative;
    padding: 1.875rem 1.4rem 1.5rem;
    .info-icon {
        width: 2.18rem;
        height: 2.18rem;
        position: absolute;
        z-index: 10;
        top: -1.09rem;
        left: 1.4rem;
    }
    .info-label {
        font-weight: 500;
        font-size: 0.93rem;
        color: #333333;
    }
    .info-content {
        margin-top: 1rem;
        font-size: 0.75rem;
        color: #333333;
        line-height: 1.5;
        &::v-deep em {
            color: #ffffff !important;
            background: #f56c6c;
        }
        &::v-deep img {
            width: 100%;
            margin: 0 auto;
        }
        &::v-deep a {
            text-decoration: underline;
        }
    }
    .info-operate {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        .operate-item {
            font-size: 0.8rem;
            color: #999999;
            margin-left: 1.1rem;
            margin-top: 1rem;
        }
        .icon {
            // padding-right: 0.5rem;
        }
    }
    .link-list {
        border-top: 1px solid #e4e4e4;
        padding-top: 0.84rem;
        margin-top: 1rem;
        .link {
            color: #3473b3;
            display: flex;
            margin-bottom: 0.5rem;
            div {
                font-size: 0.75rem;
                margin-left: 0.4rem;
                line-height: 1.5;
                display: -webkit-box;
                -webkit-line-clamp: 2; /* 这里设置你希望显示的行数 */
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
    }
}
</style>
